<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name=renderer content=webkit>
  <title>姚老师随机点名系统</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="shortcut icon" href="./favicon.ico">
  <!-- <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"> -->
</head>

<body>
  <!-- 背景logo区域start -->
  <div class="pg-bg"></div>
  <!-- 背景logo区域end -->
  <!-- 核心内容区域 -->
  <div class="container">
    <!-- 点名按钮区域start -->
    <div class="callContent">
       <!-- 显示当前班级信息 start-->
    <div class="showResultInfo"></div>
    <!-- 显示当前班级信息 end -->
      <div class="button">
        <div div class="outline" id="button4">
          开始点名<span class="lines"></span>
        </div>
        <!-- <div class="outline" id="button5">
          记录<span class="lines"></span>
        </div> -->
        <div class="outline" id="button6">
          清空记录<span class="lines"></span>
        </div>
      </div>
      <div class="name">
        <img src="./img/avatar/default.jpg" alt="">
        <br>
        <span id="select">天选之子</span>
      </div>
    </div>
    <!-- 点名按钮区域end -->
    <!-- 导入excel 选择班级区域 start-->
    <label class="fileContainer">
      <span class="glyphicon glyphicon-file"></span>
      导入数据
      <input type="file" id="inputFile" style="display: none;" onchange="importf(this)" />
　　  </label>
    <div class="dropdown">
      <button class="btn btn-lg btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="true" style="font-size:30px;">
        请选择班级
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      </ul>
    </div>
    <!-- 导入excel 选择班级区域 start -->

    <!-- 生成记录名字区域start -->
    <div class="selectNames"></div>
    <!-- 生成记录名字区域end -->
  </div>
  <script src="./js/jquery-3.5.1.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/xlsx.core.min.js"></script>
  <script>
    //名字列表
    var nameList;
    //随机使用的名单
    var ranNameList = [];
    //定义未开始
    var flag = true;
    //全局设置定时器
    var time = null;
    //选中的人名
    var value = "";
    // 0720-新增 
    let isRandomNames = [] //记录当前已抽到过的人名
    let classid = 0  //选择的班级id
    let avatar = './img/avatar/default.jpg' //默认头像src

    // 读取测试
    var wb;//读取
    var rABS = false; 
    let classGroup = JSON.parse(localStorage.getItem('classGroup'))||[]
    let ranClassNameList =JSON.parse(localStorage.getItem('ranClassNameList'))||[]
    
    // 声明一个xmlHttp
    var xmlHttp;
    if (window.ActiveXObject) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
    }
    // 循环渲染班级的方法
    function forEachClass(){
      $('.dropdown-menu').html('')
      for (let i = 0; i < classGroup.length; i++) {
        $('.dropdown-menu').append(`<li class="item" data-classid=${i}><a href="javascript:;">${classGroup[i]}</a></li>`)
      }
      if(classGroup.length>0){
        $('.showResultInfo').html(`当前已导入${classGroup.length}个班级学生信息`)
      }else{
        $('.showResultInfo').html(`当前无班级学生信息，请先导入`)
      }
      
    }
    forEachClass()
    // 没有班级信息时提示导入
    $('#dropdownMenu1').on('click',function(e){
      if(classGroup.length<=0){
        alert('请先导入班级和学生信息')
        return false
      }
    })
    // 添加下拉列表切换班级事件
    $('.dropdown-menu').on('click', '.item', function (e) {
      classid = this.dataset.classid  
      $('#dropdownMenu1').html(`${classGroup[this.dataset.classid]}<span class="caret"></span>`)
      $("#select").css({ color: "#fff" }).html(`切换 ${classGroup[this.dataset.classid]} 成功`);
      // 学生信息绑定为新班级成员
      ranNameList = ranClassNameList[classid]
      $('.callContent .name img').css({ display: 'none' }).attr('src', avatar)
    })
    /**
     *点击随机抽取名字
     */
    $("#button4").click(function () {
      console.log(flag)
      if (flag) {
        if (ranNameList.length <= 0) {
          alert('当前已无可抽奖学生，请先选择班级或清空记录')
          return
        }
        if (ranNameList.length == 1) {
          $("#select").css({ color: "#016dfc" }).html(ranNameList[0].name);
          // 有头像显示头像
          if (ranNameList[0].avatar != '') {
            $('.callContent .name img').css({ display: 'inline-block' }).attr('src', ranNameList[0].avatar)
          }
          else {
            $('.callContent .name img').css({ display: 'inline-block' }).attr('src', avatar)
          }
          alert('当前只剩最后一个学生，天选之子已定！')
          $(this).css({ color: "#fff" }).html("开启抽奖");
          $("#select").css({ color: "#56c5ff" });
          clearInterval(time);
          value = ranNameList[0].name;
          // 将已抽取的人名信息从数组中删除
          ranNameList.splice(0, 1)
          // 记录姓名
          savaName()
          return
        }
        $(this).css({ color: "#ff0000" }).html("停止点名");
        //每30毫秒执行一次
        time = setInterval(() => {
          index = Math.floor(Math.random() * ranNameList.length);
          //选中的人名
          value = ranNameList[index].name;
          $("#select").css({ color: "#016dfc" }).html(value);
          // 有头像显示头像
          // 服务端方法checkAvatar(ranNameList[index].avatar)
          if (ranNameList[index].avatar) {
            $('.callContent .name img').css({ display: 'inline-block' }).attr('src', ranNameList[index].avatar)
          }
          else {
            $('.callContent .name img').css({ display: 'inline-block' }).attr('src', avatar)
          }
        }, 30);
        //取反
        flag = !flag;
      } else {
        $(this).css({ color: "#fff" }).html("开启抽奖");
        $("#select").css({ color: "#56c5ff" });
        clearInterval(time);
        console.log(index)
        // 将已抽取的人名信息从数组中删除
        ranNameList.splice(index, 1)
        // 记录姓名
        savaName()
        flag = !flag;
      }
    });
    /**
     *记录已抽取名字的方法 
     */
    function savaName() {
      if (value != null && value != "") {
        //记录名字模板
        var nameblok = `<div class="nameblock">${value}</div>`;
        //向容器中追加名字
        $(".selectNames").append(nameblok);
        // 作无重复名字操作
        // ranNameList = ranNameList.filter((item) => {
        //   return item !== value;
        // });
      }
    }

    /**
     *删除所有生成的名字（清空记录）
     */
    $("#button6").click(function () {
      if(!flag){
        alert('请先停止抽奖')
        return
      }
      $(".selectNames").empty();
      ranClassNameList = JSON.parse(localStorage.getItem("ranClassNameList"));
      ranNameList = ranClassNameList[classid]
      console.log(ranClassNameList, classid)
      if (value != null && value != "") {
        //删除记录的名字
        $(".selectNames").empty();
        $('.callContent .name img').css({ display: 'none' }).attr('src', './img/avatar/default.jpg')
        $("#select").css({ color: "#fff" }).html(`天选之子`);
      } else {
        alert("无记录(已清空)!");
      }
    });

    /**
     * 判断图片是否存在 如果存在 返回true 否则返回false
     * 无服务端不可用
     */
    // function checkAvatar(imgSrc) {
    //   xmlHttp.open("Get", imgSrc, false);
    //   xmlHttp.send();
    //   if (xmlHttp.status == 404) {
    //     return false
    //   } else {
    //     return true
    //   }
    // }

    //开始导入学生信息的方法
    function importf(obj) {
        if(!obj.files) {
            return;
        }
        var f = obj.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            var data = e.target.result;
            if(rABS) {
                wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                    type: 'base64'
                });
            } else {
                wb = XLSX.read(data, {
                    type: 'binary'
                });
            }
            /**
             * wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
             * wb.Sheets[Sheet名]获取第一个Sheet的数据
             */
            classGroup = []
            ranClassNameList = []
            for(let i=0;i<wb.SheetNames.length;i++){
                classGroup.push(wb.SheetNames[i])
                var excelJson = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[i]]);
                ranClassNameList.push(excelJson)
            }
            console.log(classGroup)
            forEachClass()
            // 存缓存
            localStorage.setItem('classGroup', JSON.stringify(classGroup))
            localStorage.setItem('ranClassNameList', JSON.stringify(ranClassNameList))
            alert('导入成功并已更新浏览器缓存')
        };
        if(rABS) {
            reader.readAsArrayBuffer(f);
        } else {
            reader.readAsBinaryString(f);
        }
    }

    //文件流转BinaryString
    function fixdata(data) {
        var o = "",
                l = 0,
                w = 10240;
        for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + 

w)));
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
        return o;
    }

  </script>
</body>

</html>